<!-- 整改方案 -->
<template>
    <a-layout style="padding: 30px;height: 600px">
      <div class="search-box">
        <div class="btn-box">
          <!-- <a-button type="primary" @click="add">
            新增
          </a-button> -->
          <a-button type="primary" @click="add" class="mr8">
            下载列表
          </a-button>
          <a-button type="primary" @click="add">
            批量上传
          </a-button>
        </div>
        <div class="input-box">
          <!-- <a-select placeholder="请选择问题分类" v-model="queryParam.ProblemClassification" :allowClear="true">
            <a-select-option
              v-for="(item, i) in wtfl"
              :key="i"
              :value="item.value"
              :title="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-input v-model.trim="queryParam.Problems" placeholder="问题方面" />
          <a-button type="primary" @click="search" class="mr8">
            搜索
          </a-button>
          <a-button @click="loadtable">
            重置
          </a-button> -->
        </div>
      </div>
      <a-table
        class="table-box"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="tablePaginationChange"
        rowKey="id"
        :scroll="{x: '100%', y: 'calc( 103vh - 350px )'}"
      >
        <span
          slot="action"
          slot-scope="record"
          class="actionbtn">
          <span @click="edit(record)">编辑</span>
        </span>
      </a-table>
      <a-modal
          :title="visibleTitle"
          :visible="editVisible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
          cancelText="取消"
          okText="确认"
          :z-index="1000"
          width="70%"
        >
          <a-form-model
            ref="ruleForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :rules="rules"
            :model="ruleForm"
            class="formbox"
          >
            <div class="process-box">
              <div class="process-tab active">问题基本信息</div>
            </div>
            <a-form-model-item label="问题分类" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <!-- <a-select placeholder="请选择问题分类" v-model="ruleForm.ProblemClassification" :allowClear="true">
                <a-select-option
                  v-for="(item, i) in wtfl"
                  :key="i"
                  :value="item.value"
                  :title="item.name">
                  {{ item.name }}
                </a-select-option>
              </a-select> -->
              {{ ruleForm.ProblemClassification }}
            </a-form-model-item>
            <a-form-model-item label="问题方面" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <!-- <a-input v-model.trim="ruleForm.Problems" placeholder="问题方面" /> -->
              {{ ruleForm.Problems }}
            </a-form-model-item>
            <a-form-model-item label="具体问题" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <span>{{ ruleForm.FeedbackIssues }}</span>
            </a-form-model-item>
            <a-form-model-item label="备注" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <span>{{ ruleForm.remake }}</span>
            </a-form-model-item>
            <div class="process-box">
              <div class="process-tab active">整改方案</div>
            </div>
            <a-form-model-item label="整改目标及具体措施" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="target">
              <a-input placeholder="整改目标及具体措施" v-model="ruleForm.target" type="textarea" />
            </a-form-model-item>
            <a-form-model-item label="直接责任人" class="formtab" prop="personLiable">
              <a-input placeholder="直接责任人" v-model="ruleForm.personLiable" />
            </a-form-model-item>
            <a-form-model-item label="责任领导" class="formtab" prop="leadership">
              <a-input placeholder="责任领导" v-model="ruleForm.leadership" />
            </a-form-model-item>
            <a-form-model-item label="完成时限" class="formtab" prop="timeLimitFoRCompletion">
              <!-- <a-select placeholder="请选择完成时限" v-model="ruleForm.timeLimitFoRCompletion" :allowClear="true">
                <a-select-option value="一周" title="一周">一周</a-select-option>
                <a-select-option value="两周" title="两周">两周</a-select-option>
                <a-select-option value="一个月" title="一个月">一个月</a-select-option>
                <a-select-option value="三个月" title="三个月">两周</a-select-option>
                <a-select-option value="半年" title="半年">半年</a-select-option>
                <a-select-option value="其他时间" title="其他时间">其他时间</a-select-option>
              </a-select> -->
              <a-date-picker @change="onChange" v-model="ruleForm.timeLimitFoRCompletion"/>
            </a-form-model-item>
            <!-- <a-form-model-item label="其他时间" class="formtab" prop="otherTime" v-if="ruleForm.timeLimitFoRCompletion === '其他时间'">
              <a-input placeholder="其他时间" v-model="ruleForm.otherTime" />天
            </a-form-model-item> -->
            <div class="formtab"></div>
            <div class="process-box">
              <div class="process-tab active">审批信息</div>
            </div>
            <a-form-model-item label="派驻组评估意见" class="formtab">
              <a-select placeholder="请选择派驻组评估意见" v-model="ruleForm.pzzAssess" :allowClear="true">
                <a-select-option value="审批通过" title="审批通过">审批通过</a-select-option>
                <a-select-option value="审批不通过" title="审批不通过">审批不通过</a-select-option>
              </a-select>
            </a-form-model-item>
            <div class="formtab"></div>
            <a-form-model-item label="派驻组评估说明" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <a-input v-model.trim="ruleForm.pzzIllustrate" placeholder="派驻组评估说明" type="textarea" />
            </a-form-model-item>
            <a-form-model-item label="监督检查室评估意见" class="formtab">
              <a-select placeholder="请选择监督检查室评估意见" v-model="ruleForm.jcsAssess" :allowClear="true">
                <a-select-option value="审批通过" title="审批通过">审批通过</a-select-option>
                <a-select-option value="审批不通过" title="审批不通过">审批不通过</a-select-option>
              </a-select>
            </a-form-model-item>
            <div class="formtab"></div>
            <a-form-model-item label="监督检查室评估说明" class="formtabMax" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <a-input v-model.trim="ruleForm.jcsIllustrate" placeholder="监督检查室评估说明" type="textarea" />
            </a-form-model-item>
          </a-form-model>
      </a-modal>
    </a-layout>
  </template>

  <script>
  import {
    getRectificationPlanList, addRectificationPlanList
  } from '@/utils/index'
  import moment from 'moment'

  export default {
    name: 'RectificationPlan',
    data () {
      return {
        // 列
        columns: [
          {
            title: '序号',
            width: 70,
            align: 'center',
            fixed:"left",
            customRender: (text, record, index) => `${index + 1}`
          },
          {
            title: '问题分类',
            dataIndex: 'ProblemClassification',
            key: 'ProblemClassification',
            align: 'center',
            ellipsis: true,
            customRender: (text, record, index) => {
              let a = ''
              this.wtfl.forEach(element => {
                if (element.value === text) {
                  a = element.name
                }
              })
              return a
            }
          },
          {
            title: '问题方面',
            dataIndex: 'Problems',
            key: 'Problems',
            align: 'center',
            ellipsis: true
          },
          {
            title: '反馈问题',
            dataIndex: 'FeedbackIssues',
            key: 'FeedbackIssues',
            align: 'center',
            ellipsis: true
          },
          {
            title: '整改措施',
            dataIndex: 'target',
            key: 'target',
            align: 'center',
            ellipsis: true
          },
          {
            title: '责任领导',
            dataIndex: 'leadership',
            key: 'leadership',
            align: 'center',
            ellipsis: true
          },
          {
            title: '直接责任人',
            dataIndex: 'personLiable',
            key: 'personLiable',
            align: 'center',
            ellipsis: true
          },
          {
            title: '完成时限',
            dataIndex: 'timeLimitFoRCompletion',
            key: 'timeLimitFoRCompletion',
            align: 'center',
            ellipsis: true,
          },
          {
            title: '派驻组评估情况',
            dataIndex: 'pzzAssess',
            key: 'pzzAssess',
            align: 'center',
            ellipsis: true,
          },
          {
            title: '监督检查室评估情况',
            dataIndex: 'jcsAssess',
            key: 'jcsAssess',
            align: 'center',
            ellipsis: true,
          },
          {
            title: '操作',
            key: 'operation',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'action' }
          }
        ],
        dataSource: [],
        wtfl: [{
          value: '0',
          name: '聚焦基层贯彻落实党的路线方针政策和党中央决策部署情况，进一步促进基层党组织和党员干部担当作为'
        }, {
          value: '1',
          name: '聚焦群众身边腐败问题和不正之风，进一步增强群众获得感幸福感安全感'
        }, {
          value: '2',
          name: '聚焦基层党组织软弱涣散、组织力欠缺问题，进一步强化政治功能、打造坚强战斗堡垒'
        }],
        queryParam: {
          meetingType: undefined,
          theme: undefined,
          attr: []
        },
        // 分页参数
        pagination: {
          current: 1,
          // defaultCurrent: 1,
          total: 0, // 总数
          showSizeChanger: true,
          // 是否可以快速跳转至某页
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '40', '80', '100'],
          // showTotal: total => '共 ${total} 条', // 分页中显示总的数据
          // hideOnSinglePage: true, // 只有一页时是否隐藏分页器
          pageSize: 10 // 每页条数，所有页设置统一的条数
        },
        // 选中值
        ruleForm: {},
        // 表单标题内容宽度设置
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        labelCol1: { span: 3 },
        wrapperCol1: { span: 21 },
        // 表单规则
        rules: {
          target: [{ required: true, message: '请输入整改目标及具体措施', trigger: 'blur' }],
          personLiable: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
          leadership: [{ required: true, message: '请输入责任领导', trigger: 'blur' }],
          timeLimitFoRCompletion: [{ required: true, message: '请选择完成时限', trigger: 'change' }],
        },
        // 弹框显示
        editVisible: false,
        // 弹框标题
        visibleTitle: '',
        // 弹框加载状态
        confirmLoading: false
      }
    },
    mounted () {
    },
    methods: {
      moment,
      // 时间选择器
      onChange (date, dateString) {
        this.ruleForm.timeLimitFoRCompletion = dateString
      },
      tablePaginationChange (pagination) {
        // 重新设置当前页
        this.pagination.current = pagination.current
        this.pagination.pageSize = pagination.pageSize
      },
      // 查询整改方案
      loadtable () {
        this.queryParam.meetingType = undefined
        this.queryParam.theme = undefined
        this.queryParam.attr = []
        getRectificationPlanList().then(res => {
          this.dataSource = [...res]
        })
      },
      // 搜索整改方案
      search () {
        getRectificationPlanList().then(res => {
          let arr = []
          let a, b
          if (this.queryParam.ProblemClassification === undefined) {
            a = ''
          } else {
            a = this.queryParam.ProblemClassification
          }
          if (this.queryParam.Problems === undefined) {
            b = ''
          } else {
            b = this.queryParam.Problems
          }
          res.forEach(element => {
            if (element.ProblemClassification.indexOf(a) > -1 && element.Problems.indexOf(b) > -1) {
              arr.push(element)
            }
          })
          this.dataSource = [...arr]
        })
      },
      add () {
        this.ruleForm = { }
        this.editVisible = true
        this.visibleTitle = '新增整改方案'
      },
      edit (record) {
        this.ruleForm = { ...record }
        this.editVisible = true
        this.visibleTitle = '编辑整改方案'
      },
      handleOk (e) {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            addRectificationPlanList(this.ruleForm).then(res => {
              if(res) {
                this.$message.success('操作成功')
                this.editVisible = false
                this.loadtable()
              } else {
                this.$message.success('操作失败')
              }
            })
          }
        })
      },
      handleCancel (e) {
        this.editVisible = false
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  </style>
